<template>
  <el-aside class="aside" >
    <!---切换--->
    <el-menu
        background-color="#545c64"
        class="el-menu-vertical-demo"
        text-color="#fff"
    >
      <!---头像--->
      <el-row class="demo-avatar demo-basic">
        <el-col :span="20">
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar :size="50" :src="avatarUrl" />
            </div>
            <div class="sub-title">{{userName}}</div>
          </div>
        </el-col>
      </el-row>
      <div class="menu-list">
        <router-link to="/Chart">
          <el-menu-item index="1">
            <el-icon><House /></el-icon>
            <span >首页</span>
          </el-menu-item>
        </router-link>
        <router-link to="/ClubReview">
          <el-menu-item index="2" >
            <el-icon><document /></el-icon>
            <span>社团审核</span>
          </el-menu-item>
        </router-link>
        <router-link to="/Cancel">
          <el-menu-item index="3">
            <el-icon><setting /></el-icon>
            <span>社团注销</span>
          </el-menu-item>
        </router-link>
        <router-link to="/ChangeN">
          <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>社团信息变更</span>
          </el-menu-item>
        </router-link>
        <router-link to="/ClubControl">
          <el-menu-item index="5">
            <el-icon><setting /></el-icon>
            <span>社团信息管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/NumberR">
          <el-menu-item index="5">
            <el-icon><setting /></el-icon>
            <span>成员审核</span>
          </el-menu-item>
        </router-link>
        <router-link to="/PostR">
          <el-menu-item index="6">
            <el-icon><setting /></el-icon>
            <span>社团发帖审核</span>
          </el-menu-item>
        </router-link>
        <router-link to="/ContentControl">
          <el-menu-item index="8">
            <el-icon><setting /></el-icon>
            <span>社团评论管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/TypeControl">
          <el-menu-item index="9">
            <el-icon><setting /></el-icon>
            <span>社团类型管理</span>
          </el-menu-item>
        </router-link>
      </div>
    </el-menu>
  </el-aside>
</template>

<script setup name="Menu">
  import { useWebStore } from '@/stores/web.js';
  import { ref, reactive, computed,watch} from 'vue'
  import axios from 'axios'

const webStore = useWebStore();
const avatarUrl=ref('')
const userName=ref('')

async function getUserInfo() {
  try{
    const response=await axios.get('http://localhost:8080/user/getInfo/'+webStore.web.uid)
    console.log('管理员信息：',response)
    avatarUrl.value=response.data.data.avatarUrl
    userName.value=response.data.data.name
    console.log('头像与名字：',avatarUrl,userName)
  }catch(error){
    console.log(error)
  }
}

getUserInfo()
</script>

<style scoped>
.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 18px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 20px;
}
.demo-basic .block {
  flex: 1;
}
.aside{
  width:200px;
  height:850px;
  background-color:#545c64;
}
.menu-list{
  margin-left: 15px;
}
</style>